<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统 - 西大网上书城</title>
    <link rel="stylesheet" href="css/bookstore.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .main-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .welcome-header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .welcome-title {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .user-info {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user-details {
            flex: 1;
        }

        .logout-btn {
            padding: 10px 20px;
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }

        .feature-card {
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            text-align: center;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .feature-card:nth-child(1) {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
        }

        .feature-card:nth-child(2) {
            background: linear-gradient(135deg, #48dbfb, #0abde3);
            color: white;
        }

        .feature-card:nth-child(3) {
            background: linear-gradient(135deg, #1dd1a1, #10ac84);
            color: white;
        }

        .feature-icon {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .feature-title {
            font-size: 1.5em;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .feature-desc {
            font-size: 1em;
            opacity: 0.9;
            line-height: 1.5;
        }

        .system-info {
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            margin-top: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .system-info h3 {
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            text-align: center;
        }

        .info-item {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class="main-container">
    <div class="welcome-header">
        <h1 class="welcome-title">西大网上书城管理系统</h1>
        <p>专业化的图书信息管理平台</p>
    </div>

    <div class="user-info">
        <div class="user-details">
            <h3>欢迎回来，<span id="username">管理员</span>！</h3>
            <p>登录时间: <span id="loginTime"></span></p>
            <p>本次会话ID: <span id="sessionId"></span></p>
        </div>
        <button class="logout-btn" onclick="logout()">退出登录</button>
    </div>

    <div class="feature-grid">
        <a href="./add_book.html" class="feature-card">
            <div class="feature-icon">📚</div>
            <div class="feature-title">添加图书</div>
            <div class="feature-desc">向系统中添加新的图书信息，包括书名、作者、价格等详细信息</div>
        </a>

        <a href="./books" class="feature-card">
            <div class="feature-icon">📖</div>
            <div class="feature-title">查看图书</div>
            <div class="feature-desc">浏览系统中所有图书的完整列表，支持分页和详细信息查看</div>
        </a>

        <a href="./searchBook?content=" class="feature-card">
            <div class="feature-icon">🔍</div>
            <div class="feature-title">搜索图书</div>
            <div class="feature-desc">通过书名、作者等条件快速搜索定位到特定图书</div>
        </a>
    </div>

    <div class="system-info">
        <h3>📊 系统信息</h3>
        <div class="info-grid">
            <div class="info-item">
                <strong>系统版本</strong>
                <p>v2.0.1</p>
            </div>
            <div class="info-item">
                <strong>技术支持</strong>
                <p>西大计算机学院</p>
            </div>
            <div class="info-item">
                <strong>最后更新</strong>
                <p id="lastUpdate">2025-11-15</p>
            </div>
        </div>
    </div>
</div>

<script>
        // 显示登录信息
        document.getElementById('loginTime').textContent = new Date().toLocaleString();
        document.getElementById('lastUpdate').textContent = new Date().toLocaleDateString();

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = './logout';
            }
        }

        // 显示用户名（可以从后端获取）
        // 这里简单演示，实际应该从session获取
        document.getElementById('username').textContent = '管理员';
    </script>
</body>
</html>